<template>
  <div class="rela" v-loading="loading">
    <div
      @mouseover="isHover = true"
      @mouseout="isHover = false"
      v-if="stepIndex != 1"
      @click="goBack"
      class="back"
    >
      <img v-show="!isHover" src="@/assets/images/back_icon.png" alt="" />
      <img v-show="isHover" src="@/assets/images/back_icon_hover.png" alt="" />
    </div>
    <div
      class="chinaRef"
      ref="chinaRef"
      :style="{ height: height + 'px', width: width + 'px' }"
    ></div>
  </div>
</template>
  
  <script>
import axios from "axios";
import * as echarts from "echarts";
import base64 from "../mapJson/base64.json";
import base642 from "../mapJson/base642.json";
import base643 from "../mapJson/base643.json";
import base64zi from "../mapJson/base64zi.json";
import base64lv from "../mapJson/base64lv.json";
import base64lan from "../mapJson/base64lan.json";
import geoJson from "../mapJson/china.json";
// import geoJson from '../mapJson/zhejiang.json'

export default {
  name: "mapdemo",
  props: {
    width: {
      default: "200",
    },
    height: {
      default: "200",
    },
    showDialog: {
      default: false,
    },
    schoolList: {
      type: [Array],
      default: [],
    },
  },
  data() {
    return {
      chinaRefChart: null,
      isHover: false,
      stepIndex: 1,
      isFirst: 1,
      schoolId: "",
      provinceName: "",
      cityName: "",
      jsonObject: {
        安徽: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/anhui.json",
        六安: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/anhui_liuan.json",
        合肥: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/anhui_hefei.json",
        江西: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/jiangxi.json",
        吉安: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/jiangxi_jian.json",
        上海: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/shanghai.json",
        金山区:
          "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/shanghai_jinshan.json",
        北京: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/beijing.json",
        东城区:
          "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/beijing_dongcheng.json",
        密云区:
          "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/beijing_miyun.json",
        浙江: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/zhejiang.json",
        杭州: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/hangzhou.json",
        丽水: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/lishui.json",
        嘉兴: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/jiaxing.json",
        衢州: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/quzhou.json",
        绍兴: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/shaoxing.json",
        台州: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/taizhou.json",
        温州: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/wenzhou.json",
        湖州: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/huzhou.json",
        宁波: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/ningbo.json",
        金华: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/jinhua.json",
        舟山: "https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/mapJson/zhoushan.json",
      },
      mapData: [],
      loading: false,
      mapJson: geoJson,
      toolTipData: [],
      geoCoordMap: {
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京市: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.611053, 43.828171],
        西藏: [91.117212, 29.646922],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        江苏: [118.8062, 31.9208],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        台湾: [120.702967, 24.123621],
        萧山技师: [120.290936, 30.15458],
        杭州: [120.199987, 30.258822],
        上海: [121.4648, 31.2891],
      },
    };
  },
  watch: {
    schoolList: {
      handler(val) {
        console.log(
          "schoolList",
          val[0].map((item) => {
            return {
              tagId: item.tagId,
              schoolArea: item.schoolArea,
              schoolAddress: item.schoolAddress,
              schoolName: item.schoolName,
            };
          })
        );
        if (val) {
          this.formaterData(val);
        }
      },
      deep: true,
    },
  },
  mounted() {},
  methods: {
    async goBack() {
      this.$emit("closeDialog", false);
      if (this.stepIndex == 3) {
        this.mapJson = await this.getMapJson(
          this.jsonObject[this.provinceName]
        );
        this.stepIndex--;
        this.formaterMapData(2, this.provinceName);
        this.$nextTick(() => {
          this.setChinaMap(0.1, 0.1, name, 0.9, "120%");
        });
        return;
      }
      if (this.stepIndex == 2) {
        this.mapJson = geoJson;
        this.stepIndex--;
        this.formaterMapData(1);
        this.$nextTick(() => {
          this.setChinaMap(1.5, 2, "china", 0.65, "220%");
        });
      }
    },
    async getMapJson(url) {
      let res = await axios.get(url);
      return res.data;
    },
    async formaterData(val) {
      this.loading = true;
      let arr = [];
      for (const value of val[0]) {
        let provinceName = value.schoolArea ? value.schoolArea.slice(0, 2) : "";
        let cityName = value.schoolArea ? value.schoolArea.slice(3, 5) : "";
        let address = value.schoolArea + value.schoolAddress;
        let tagId = value.tagId;
        try {
          let lngLat = await this.getPointByAddress(
            address ? address : "浙江省杭州市"
          );
          let obj = {
            provinceName,
            cityName,
            tagId,
            lngLat,
            name: value.schoolName,
            schoolId: value.schoolId,
            tagId: value.tagId,
          };
          arr.push(obj);
          console.log("arr111", arr);
        } catch (error) {
          console.error("Error:", error);
          // 可以根据需要进行错误处理
        }
      }
      let result = [];
      // 遍历arr数组中的每个对象
      for (const obj of arr) {
        const { provinceName, cityName, lngLat, name, schoolId, tagId } = obj;
        // 查找是否已存在对应省份的对象
        let provinceObj = result.find((item) => item.name === provinceName);
        if (!provinceObj) {
          // 创建新的省份对象
          provinceObj = {
            name: provinceName,
            tagId: tagId,
            lngLat: lngLat,
            value: 0,
            childCity: [],
          };
          result.push(provinceObj);
        }
        // 查找是否已存在对应城市名称的对象
        let cityObj = provinceObj.childCity.find(
          (item) => item.name === cityName
        );
        if (!cityObj) {
          // 创建新的城市对象
          cityObj = {
            tagId: tagId,
            name: cityName,
            lngLat: lngLat,
            value: 0,
            childArea: [],
          };
          provinceObj.childCity.push(cityObj);
        }
        // 添加学校信息到城市的childArea数组中
        cityObj.childArea.push({
          name: name,
          lngLat: lngLat,
          id: schoolId,
          tagId: tagId,
        });
        // 更新省份和城市的数量
        provinceObj.value++;
        cityObj.value++;
      }
      console.log(result, "cityObj-------------");
      // 获取省份和城市的经纬度
      for (const provinceObj of result) {
        const { name } = provinceObj;
        try {
          const lngLat = await this.getPointByAddress(name + "省");
          provinceObj.lngLat = lngLat;
          this.geoCoordMap[name] = lngLat;
          for (const cityObj of provinceObj.childCity) {
            const { name } = cityObj;
            const lngLat = await this.getPointByAddress(name + "市");
            this.geoCoordMap[name] = lngLat;
            cityObj.lngLat = lngLat;
            if (cityObj.childArea.length > 0) {
              for (const cityObjElement of cityObj.childArea) {
                const { name } = cityObjElement;
                this.geoCoordMap[name] = cityObjElement.lngLat;
              }
            }
          }
        } catch (error) {
          console.error("Error:", error);
          // 可以根据需要进行错误处理
        }
      }
      this.mapData = result;
      this.loading = false;
      this.formaterMapData(1);
    },
    //过滤整合MapData
    formaterMapData(type, provinceName, cityName) {
      this.toolTipData = [];
      //省级数据处理
      if (type == 1) {
        for (const mapDatum of this.mapData) {
          console.log("11111111", mapDatum);
          let obj = {
            name: mapDatum.name,
            value: mapDatum.value,
            level: 1,
            tagId: mapDatum.tagId,
          };
          this.toolTipData.push(obj);
        }
        this.$nextTick(() => {
          this.setChinaMap(1.5, 2, "china", 0.65, "220%");
        });
      }
      //市级数据处理
      if (type == 2) {
        for (const mapDatum of this.mapData) {
          console.log("2222222222", mapDatum);
          if (provinceName == mapDatum.name) {
            if (mapDatum.childCity.length > 0) {
              console.log("省级级数据处理", mapDatum.childCity, provinceName);
              for (const childCityElement of mapDatum.childCity) {
                let obj = {
                  name: childCityElement.name,
                  value: childCityElement.value,
                  level: 2,
                  tagId: childCityElement.tagId,
                };
                this.toolTipData.push(obj);
              }
            }
          }
        }
      }
      //市级下的学校数据处理
      if (type == 3) {
        console.log(
          "市级下的学校数据处理3",
          this.mapData,
          provinceName,
          cityName
        );
        for (const mapDatum of this.mapData) {
          if (provinceName == mapDatum.name) {
            console.log(mapDatum.childCity);
            if (mapDatum.childCity.length > 0) {
              for (const childCityElement of mapDatum.childCity) {
                if (cityName == childCityElement.name) {
                  console.log(
                    "市级数据处理",
                    childCityElement.childArea,
                    cityName
                  );
                  if (childCityElement.childArea.length > 0) {
                    for (const childAreaElement of childCityElement.childArea) {
                      let obj = {
                        name: childAreaElement.name,
                        id: childAreaElement.id,
                        level: 3,
                        tagId: childAreaElement.tagId,
                      };
                      this.toolTipData.push(obj);
                    }
                  }
                }
              }
            }
          }
        }
      }
      console.log(this.toolTipData, "this.toolTipData", type);
    },
    // 根据地址名称获取经纬度坐标
    getPointByAddress(params) {
      console.log("根据地址名称获取经纬度坐标", params);
      let address = params == "上海省" ? "上海市" : params;

      // 创建地理编码实例
      const myGeo = new BMap.Geocoder();
      return new Promise((resolve, reject) => {
        // 对地址进行地理编码
        myGeo.getPoint(
          address,
          (point) => {
            if (point) {
              // 地理编码成功，返回经纬度坐标对象
              let arr = [point.lng, point.lat];
              resolve(arr);
            } else {
              // 地理编码失败
              console.log(address, "地理编码失败111");
              reject("地理编码失败");
            }
          },
          "全国"
        );
      });
    },
    getNameLevel(name) {
      let type;
      for (const mapDatum of this.mapData) {
        if (name == mapDatum.name) {
          type = 2;
          return type;
        }
        if (mapDatum.childCity.length > 0) {
          for (const childCityElement of mapDatum.childCity) {
            if (name == childCityElement.name) {
              type = 3;
              return type;
            }
          }
        }
      }
    },
    async setChinaMap(num, lavel, mapName, zoom, layoutSize, show) {
      //只用初始化注册一次
      if (this.isFirst == 1) {
        this.chinaRefChart = echarts.init(this.$refs.chinaRef);
        this.chinaRefChart.on("click", async (params) => {
          //地图某个省份的数据统计被点击
          if (params.seriesType == "scatter") {
            let data = params.data[2];
            let name = data.name.replace("市", "");
            let type;
            if (
              name == "北京" ||
              name == "上海" ||
              name == "重庆" ||
              name == "天津"
            ) {
              type = 3;
            } else {
              type = this.getNameLevel(name);
            }

            //省级统计数量被点击
            if (data.level == 1) {
              console.log("省级统计数量被点击", this.jsonObject[name], name);
              this.mapJson = await this.getMapJson(this.jsonObject[name]);
              this.stepIndex = 2;
              this.provinceName = name;
              if (
                name == "北京" ||
                name == "上海" ||
                name == "重庆" ||
                name == "天津"
              ) {
                this.formaterMapData(type, name, name);
              } else {
                this.formaterMapData(type, name);
              }

              this.$nextTick(() => {
                console.log(333333333333);
                this.setChinaMap(0.1, 0.1, name, 0.9, "100%");
              });
            }
            //市级统计数量被点击
            if (data.level == 2) {
              console.log("市级统计数量被点击", this.jsonObject[name], name);
              this.mapJson = await this.getMapJson(this.jsonObject[name]);
              this.stepIndex = 3;
              this.cityName = name;
              this.formaterMapData(type, this.provinceName, name);
              this.$nextTick(() => {
                console.log(4444444444444);
                this.setChinaMap(0.1, 0.1, name, 0.9, "140%", true);
              });
            }
            //区级统计数量被点击
            if (data.level == 3) {
              let obj = {
                showDialog: true,
                id: data.id,
                name: data.name,
              };
              this.$emit("openDialog", obj);
            }
          }
          //地图某个省份被点击
          if (params.seriesType == "map") {
            let name = params.name.replace("市", "");
            if (this.jsonObject[name] && params.data) {
              let type = this.getNameLevel(name);
              this.mapJson = await this.getMapJson(this.jsonObject[name]);
              //从省进入市  type==1
              if (type == 2) {
                this.stepIndex = 2;
                this.provinceName = name;
                this.formaterMapData(type, name);

                this.$nextTick(() => {
                  console.log(11111);
                  this.setChinaMap(0.1, 0.1, name, 0.9, "120%");
                });
              }
              if (type == 3) {
                this.stepIndex = 3;
                this.cityName = name;
                this.formaterMapData(type, this.provinceName, name);
                this.$nextTick(() => {
                  console.log(222222);
                  this.setChinaMap(0.1, 0.1, name, 0.9, "120%", true);
                });
              }
            }
          }
        });
        this.isFirst++;
      }
      /*获取地图数据*/
      console.log("获取地图数据", this.mapJson);
      echarts.registerMap(mapName, { geoJSON: this.mapJson });
      let mapFeatures = echarts.getMap(mapName).geoJson.features;
      mapFeatures.forEach((v) => {
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        this.geoCoordMap[name] = v.properties.cp;
      });
      let option = {
        tooltip: {
          show: false,
        },
        geo: [
          {
            layoutCenter: ["50%", "50%"], //位置
            layoutSize: layoutSize, //大小
            show: true,
            center: mapName == "china" ? [104.195397, 37.263438] : null,
            map: mapName,
            roam: true, // 开启鼠标缩放和平移漫游
            zoom: zoom,
            aspectScale: 1,
            select: {
              //这个就是鼠标点击后，地图想要展示的配置
              disabled: false, //可以被选中
              itemStyle: {
                //相关配置项很多，可以参考echarts官网
                areaColor: "#e6f0fe", //选中
              },
              label: {
                show: true,
                color: "#fff",
              },
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#8575fb",
                },
              },
              emphasis: {
                show: true,
                textStyle: {
                  color: "#8575fb",
                },
              },
            },
            itemStyle: {
              normal: {
                areaColor: {
                  type: "linear",
                  x: 1200,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      color: "white", // 0% 处的颜色
                    },
                    {
                      offset: 0.5,
                      color: "white", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "white", // 50% 处的颜色
                    },
                  ],
                  global: true, // 缺省为 false
                },
                borderColor: "#9596b5",
                borderWidth: 2,
                shadowColor: "#d1d2e7",
                shadowBlur: 4,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowInset: true,
              },
              emphasis: {
                areaColor: "#e4edfc",
                // borderWidth: 0
              },
            },
          },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -1,
          //   aspectScale: 1,
          //   zoom: zoom,
          //   layoutCenter: ["50%", "51%"],
          //   layoutSize: layoutSize,
          //   roam: true, // 开启鼠标缩放和平移漫游
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor:"rgba(17, 149, 216,0.6)",
          //       borderColor: "#9596b5",
          //       shadowColor: "#d1d3e4",
          //       shadowOffsetY: 5,
          //       shadowBlur: 15,
          //       areaColor: "white",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -2,
          //   aspectScale: 1,
          //   zoom: zoom,
          //   layoutCenter: ["50%", "52%"],
          //   layoutSize: layoutSize,
          //   roam: true, // 开启鼠标缩放和平移漫游
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(57, 132, 188,0.4)",
          //       borderColor: "#9596b5",
          //       shadowColor: "#d1d3e4",
          //       shadowOffsetY: 5,
          //       shadowBlur: 15,
          //       areaColor: "white",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -3,
          //   aspectScale: 1,
          //   zoom: zoom,
          //   layoutCenter: ["50%", "53%"],
          //   layoutSize: layoutSize,
          //   roam: true, // 开启鼠标缩放和平移漫游
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 1,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "#9596b5",
          //       shadowColor: "#d1d3e4",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "transparent",
          //     },
          //   },
          // },
          // {
          //   type: "map",
          //   map: mapName,
          //   zlevel: -4,
          //   aspectScale: 1,
          //   zoom: zoom,
          //   layoutCenter: ["50%", "54%"],
          //   layoutSize: layoutSize,
          //   roam: true, // 开启鼠标缩放和平移漫游
          //   silent: true,
          //   itemStyle: {
          //     normal: {
          //       borderWidth: 2,
          //       // borderColor: "rgba(11, 43, 97,0.8)",
          //       borderColor: "#9596b5",
          //       shadowColor: "#d1d3e4",
          //       shadowOffsetY: 15,
          //       shadowBlur: 10,
          //       areaColor: "white",
          //     },
          //   },
          // },
        ],
        dataZoom: [
          {
            // 第一个 dataZoom 组件，默认控制 X 轴
            type: "slider", // 滑动条类型的数据区域缩放组件
            xAxisIndex: [0], // 控制第几个 X 轴，默认为第一个 X 轴
            filterMode: "filter", // 数据筛选方式，默认为 'filter'
            start: 0, // 数据窗口范围的起始百分比
            end: 100, // 数据窗口范围的结束百分比
          },
          {
            // 第二个 dataZoom 组件，默认控制 Y 轴
            type: "inside", // 内置型数据区域缩放组件
            yAxisIndex: [0], // 控制第几个 Y 轴，默认为第一个 Y 轴
            start: 0,
            end: 100,
          },
        ],
        series: [
          {
            type: "map",
            roam: true, // 开启鼠标缩放和平移漫游
            // 其他地图配置
            map: mapName,
            geoIndex: 0,
            data: this.toolTipData,
          },
          //柱状体的主干
          {
            type: "lines",
            zlevel: 5,
            effect: {
              show: false,
              symbolSize: 5, // 图标大小
            },
            lineStyle: {
              width: 6, // 尾迹线条宽度
              color: function (params) {
                console.log("itemStyle", params);
                if (params.data.item.level == 3) {
                  if (
                    params.data.item.tagId == 2 ||
                    params.data.item.tagId == 3
                  ) {
                    return "#8674fe";
                  } else {
                    return "#fd9522";
                  }
                } else {
                  return "#da93f2";
                }
              },
              opacity: 1, // 尾迹线条透明度
              curveness: 0, // 尾迹线条曲直度
            },
            label: {
              show: 0,
              position: "end",
              formatter: "245",
            },
            silent: true,
            data: this.lineData(num),
          },
          // 柱状体的顶部
          {
            type: "scatter",
            coordinateSystem: "geo",
            geoIndex: 0,
            zlevel: 5,
            label: {
              normal: {
                show: true,
                formatter: function (params) {
                  console.log("params", params, show);
                  let name = params.data[2].name;
                  let value = params.data[2].value;
                  let text =
                    // !show
                    params.data[2].level !== 3
                      ? `{zline|${name}}:{zline|${value}家}`
                      : params.data[2].tagId == 2 || params.data[2].tagId == 3
                      ? `{tline|${name.slice(0, 6)}}\n{xline|${name.slice(
                          8,
                          name.length
                        )}}`
                      : `{t2line|${name.slice(0, 6)}}\n{x2line|${name.slice(
                          8,
                          name.length
                        )}}`;
                  return text;
                },
                color: "#8674fd",
                position: ["35%", "21%"], // 设置标签的位置为数据点的中心
                offset: [0, 0], // // 微调标签的位置，这里是向右偏移10像素，向上偏移20像素
                width: 165,
                height: 84,
                rich: {
                  xline: {
                    padding: [2, 0, 0, 0],
                    color: "#8674fd",
                    fontSize: 12,
                    fontWeight: 600,
                  },
                  zline: {
                    padding: [6, 0, 0, 0],
                    color: "#da93f2",
                    fontSize: 12,
                    fontWeight: 600,
                  },
                  tline: {
                    // padding: [0, 27],
                    color: "#8674fd",
                    fontSize: 12,
                  },
                  x2line: {
                    padding: [2, 0, 0, 0],
                    color: "#fd9522",
                    fontSize: 12,
                    fontWeight: 600,
                  },

                  t2line: {
                    // padding: [0, 27],
                    color: "#fd9522",
                    fontSize: 12,
                  },
                },
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              color: "#8674ff",
              opacity: 1,
            },
            symbol: function (e) {
              if (e[2].level == 3) {
                if (e[2].tagId == 2 || e[2].tagId == 3) {
                  return base64.img;
                } else {
                  return base642.img;
                }
              } else {
                return base64zi.img;
              }
            },
            symbolSize: [165, 84],
            symbolOffset: [0, -20],
            z: 9999,
            data: this.scatterData(lavel),
          },
          // 圆点
          {
            name: "Top5",
            type: "effectScatter",
            coordinateSystem: "geo",
            data: this.convertData(),
            showEffectOn: "render",
            rippleEffect: {
              scale: 5,
              brushType: "stroke",
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "bottom",
                show: false,
                color: "#fff",
                distance: 10,
              },
            },
            symbol: "circle",
            symbolSize: [20, 10],
            //各个省份的样式
            itemStyle: {
              normal: {
                color: function (params) {
                  console.log("itemStyle", params);
                  if (params.data.level == 3) {
                    if (params.data.tagId == 2 || params.data.tagId == 3) {
                      return "#8674fe";
                    } else {
                      return "#fd9522";
                    }
                  } else {
                    return "#da93f2";
                  }
                },
                shadowBlur: 10,
                shadowColor: function (params) {
                  console.log("itemStyle", params);
                  if (params.data.level == 3) {
                    if (params.data.tagId == 2 || params.data.tagId == 3) {
                      return "#8674fe";
                    } else {
                      return "#fd9522";
                    }
                  } else {
                    return "#da93f2";
                  }
                },
              },
              opacity: 1,
            },
            zlevel: 4,
          },
        ],
      };

      this.chinaRefChart.setOption(option);
    },
    // 柱状体的顶部
    scatterData(num) {
      return this.toolTipData.map((item) => {
        return [
          this.geoCoordMap[item.name][0],
          this.geoCoordMap[item.name][1] + num,
          item,
        ];
      });
    },
    convertData() {
      let res = [];
      for (const toolTipDatum of this.toolTipData) {
        let geoCoord = this.geoCoordMap[toolTipDatum.name];
        if (geoCoord) {
          res.push({
            name: toolTipDatum.name,
            value: geoCoord,
            tagId: toolTipDatum.tagId,
            level: toolTipDatum.level,
          });
        }
      }
      return res;
    },
    // 柱状体的主干
    lineData(num) {
      console.log("柱状体的主干", this.toolTipData);
      return this.toolTipData.map((item) => {
        return {
          coords: [
            this.geoCoordMap[item.name],
            [
              this.geoCoordMap[item.name][0],
              this.geoCoordMap[item.name][1] + num,
            ],
          ],
          item: item,
        };
      });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.back {
  position: absolute;
  left: 0;
  top: 20px;
  z-index: 999;
  cursor: pointer;
  user-select: none;
  img {
    width: 32px;
    height: 32px;
  }
}
::v-deep .el-loading-mask {
  background: rgba(83, 123, 180, 0.6);
}
::v-deep .el-loading-spinner .path {
  stroke: #8674ff;
}
</style>
  